<template>
	<view class="mainWrap">
		<view class="cu-chat">
			<scroll-view id="scrollview" scroll-y :scroll-top="scrollTop" @scrolltoupper="top" style="height: 100%;"
				@scroll="scroll">
				<view class="list_loading" v-if="status == 'loading'">
					<u-loadmore :status="status" />
				</view>
				<!-- 				<view :class="[$appType == 'ios'?'m-ios-item':'m-item','m-item']">
					<view class="cu-item">
						<view class="rate">
							<u-rate :count="5" v-model="rateValue" :size="40" inactive-color="#ff7e20"
								active-color="#ff7e20"></u-rate>
							<text>一般（{{ rateValue}}分）</text>
						</view>
					</view>
				</view> -->
				<!-- :class="[$appType == 'ios_app'?'m-ios-item':'m-item','m-item']" -->
				<view v-for="(item,index) in messageLogging" class="m-item" :key="index">
					<view :class="[item.sourceUserId == serviceInfo.sourceUserId?'self':'','cu-item']"
						v-if="item.msgType != 'guessLike' && item.msgType != 'evaluateType'">
						<view class="date">{{ item.sendTime }}</view>
						<view class="date" v-if="item.sourceUserId != serviceInfo.sourceUserId" style="top: 20rpx;">
							{{ item.targetUserName || '' }}
						</view>
						<view class="cu-avatar radius" v-if="item.sourceUserId != serviceInfo.sourceUserId">
							<image src="../../static/evaluate/level_1.png" style="height: 100%;width: 100%;" mode="aspectFill">
							</image>
						</view>
						<!-- <view class="cu-avatar radius">
							<image src="../../static/window.png" style="height: 100%;width: 100%;"></image>
						</view> -->
						<view class="main">
							<view class="content shadow">
								<jyfParser :html="item.msgContent" ref="article"></jyfParser>
							</view>
						</view>
						<view class="cu-avatar radius" v-if="item.sourceUserId == serviceInfo.sourceUserId">
							<image src="../../static/evaluate/level_2.png" style="height: 100%;width: 100%;"></image>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
			<input class="solid-bottom" v-model="message" placeholder="请在这输入文字" :adjust-position="false" :focus="false"
				maxlength="200" cursor-spacing="10" @blur="InputBlur" @focus="InputFocus" auto-blur
				@confirm="sendMessage" :disabled="disabled"></input>
			<view class="action">
				<text class="cuIcon-emojifill text-grey"></text>
			</view>
			<button class="cu-btn bg-green shadow" @click.async="sendMessage" v-if="!disabled">发送</button>
			<button class="cu-btn bg-green shadow" v-if="disabled" style="filter: grayscale(100%);">发送</button>
		</view>
		
	</view>
</template>

<script>
	// <jyfParser :html="details.brief" ref="article"></jyfParser>
	import jyfParser from '@/components/jyf-parser/jyf-parser';
	import {
		_debounce
	} from '@/common/js/fns.js';
	export default {
		components: {
			jyfParser
		},
		data() {
			return {
				rateValue: 0,
				listMore: false,
				name: '',
				contentText: {
					contentdown: "下拉显示更多",
					contentrefresh: "消息加载中...",
					contentnomore: "暂无更多消息"
				},
				InputBottom: 0,
				length: 10,
				page: 1,
				status: 'more',
				loadmoreShow: true,
				myId: '',
				otherId: '',
				socket: null,
				message: '',
				messageLogging: [{
					msgContent:'大大苏打大苏打',
					sendTime:'2021-01-01',
					targetUserName:'阿萨大'
				}],
				scrollTop: 0,
				listHeght: 0,
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0
				},
				replyInfo: '',
				code: '',
				once: true,
				sessionKey: '',
				qyUuid: '',
				id: '',
				byWriter: '',
				serviceInfo: {},
				questionList: [],
				evaluateIndex: 0,
				inputShow: false,
				disabled: true,
				socketTask: {},
				socketFlag: 0,
				query: '',
				showToastFlag: true,
				appType: '',
				isAddShow: false,
				nowScrollTop: 0
				//readyState
				// 0: 表示正在连接
				// 1: 表示连接成功，可以通信了
				// 2: 表示连接正在关闭
				// 3: 表示连接已经关闭，或者打开连接失败
			};
		},
		onShow() {

		},
		async onLoad(options) {
		
		},
		async onReady() {
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
			this.style.pageHeight = res.windowHeight;
			this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (100) - 70;
		},
		methods: {
			scroll(e) {
				this.nowScrollTop = e.detail.scrollTop;
			},
			formatData(date, fmt) {
				if (date == null || date == '' || date == 'undefined') {
					return '';
				}
				date = date + '';
				date = date.replace(/\-/g, "/");
				if (date.indexOf('GMT') == -1) {
					date = date.replace(/\T/g, " ");
				}
				if (date.indexOf('.') != -1) {
					date = date.substr(0, date.indexOf('.'));
				}
				date = new Date(date);
				fmt = fmt || "yyyy-MM-dd hh:mm:ss";
				var o = {
					"M+": date.getMonth() + 1, //月份   
					"d+": date.getDate(), //日   
					"h+": date.getHours(), //小时   
					"m+": date.getMinutes(), //分   
					"s+": date.getSeconds(), //秒   
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度   
					"S": date.getMilliseconds() //毫秒   
				};
				if (/(y+)/.test(fmt))
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				for (var k in o)
					if (new RegExp("(" + k + ")").test(fmt))
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k])
							.length)));
				var time1 = fmt.split(' ')[0];
				var arrTime = fmt.split(' ')[1].split(':');
				var time2 = arrTime.slice(1, arrTime.length).join(':');
				var h = parseInt(arrTime[0]);
				var newH = ((h < 24) ? h : (h % 24)).toString();
				return time1 + ' ' + newH + ':' + time2;
			},
			scrollToBottom() {
				this.scrollTop = this.nowScrollTop;
				let that = this;
				let query = uni.createSelectorQuery();
				query.selectAll('.m-item').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
					that.style.mitemHeight = 0;
					res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height +
						40) //获取所有内部子元素的高度
					setTimeout(() => {
						if (that.style.mitemHeight > (that.style.contentViewHeight -
								100)) { //判断子元素高度是否大于显示高度
							that.scrollTop = that.style.mitemHeight - that.style
								.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
						}
					}, 100)

				})
			},
			top() {
				if (this.status === 'nomore') {
					return;
				}
			},
			InputFocus(e) {
				this.$nextTick(() => {
					this.scrollToBottom();
				})
			},
			InputBlur(e) {
				this.InputBottom = 0;
			}
		},
	}
</script>
<style>
	/* uni-app,
	page {
		height: calc(100% - 100rpx);
		height: 100%;
	}

	page {
		padding-bottom: 100upx;
	} */
</style>
<style lang="less" scoped>
	.popup {
		border: #ec8638 1rpx solid;
		border-radius: 20rpx;
		overflow: hidden;

		&-textarea {
			width: 500rpx;
			height: 340rpx;
			font-size: 28rpx;
			padding: 30rpx;
			box-sizing: border-box;
		}

		&-btn {
			display: flex;
			justify-content: flex-end;
			padding-bottom: 10rpx;

			button {
				position: relative;
				border: 0upx;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 0 34upx;
				font-size: 28upx;
				height: 54upx;
				line-height: 1;
				text-align: center;
				text-decoration: none;
				overflow: visible;
				margin-left: initial;
				transform: translate(0upx, 0upx);
				margin-right: initial;
				background: #ec8638;
				color: #FFFFFF;
				margin-right: 30rpx;

				&::after {
					content: '';
					border: none;
				}
			}
		}
	}

	.Collapse {
		overflow: hidden;

		.Collapse_scroll {
			transition: all 0.5s ease-in;

			.Collapse_box {
				padding: 0 0 0 30rpx;
				display: flex;
				flex-wrap: wrap;


				.box {
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					margin-right: 30rpx;

					view {
						height: 60rpx;
						width: 60rpx;
						margin-right: 10rpx;

						image {
							height: 100%;
							width: 100%;
							border-radius: 50%;
						}
					}

					text {
						font-size: 28rpx;
						color: #333333;
					}
				}
			}
		}
	}

	.list_loading {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.m-item {
		// height: 220upx;
		// overflow: hidden;
		display: flex;
	}

	.m-ios-item {
		height: 200upx;
		overflow: hidden;
	}

	.mainWrap {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
	}

	.radius {
		border-radius: 50%;
	}

	.solid-bottom::after {
		border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
	}

	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-bar .action {
		display: flex;
		align-items: center;
		height: 100%;
		justify-content: center;
		max-width: 100%;

		image {
			height: 44rpx;
			width: 44rpx;
		}
	}

	.cu-bar.foot {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
	}

	.cu-bar.input {
		padding-right: 20upx;
		background-color: #ffffff;
	}

	.cu-bar.input input {
		background-color: #f5f5f5;
		overflow: initial;
		line-height: 64upx;
		height: 64upx;
		min-height: 64upx;
		flex: 1;
		font-size: 30upx;
		margin: 0 20upx;
		padding-left: 20rpx;
	}

	.cu-bar.input .action {
		margin-left: 20upx;
	}

	.cu-bar.input .action [class*="cuIcon-"] {
		font-size: 48upx;
	}

	.cu-bar.input input+.action {
		margin-right: 20upx;
		margin-left: 0upx;
	}

	.cu-bar.input .action:first-child [class*="cuIcon-"] {
		margin-left: 0upx;
	}

	.cu-btn {
		position: relative;
		border: 0upx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0 30upx;
		font-size: 28upx;
		height: 64upx;
		line-height: 1;
		text-align: center;
		text-decoration: none;
		overflow: visible;
		margin-left: initial;
		transform: translate(0upx, 0upx);
		margin-right: initial;
		color: #ec8638;
		margin-right: 20rpx;
	}

	.cu-btn::after {
		display: none;
	}


	.cu-btn[class*="line"]::after {
		content: " ";
		display: block;
		width: 200%;
		height: 200%;
		position: absolute;
		top: 0;
		left: 0;
		border: 1upx solid currentColor;
		transform: scale(0.5);
		transform-origin: 0 0;
		box-sizing: border-box;
		border-radius: 12upx;
		z-index: 1;
		pointer-events: none;
	}




	.cu-chat {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background: #f8f8f8;
		padding-bottom: 100rpx;
	}

	.cu-chat .cu-item {
		display: flex;
		padding: 70upx 30upx 70upx;
		position: relative;
		width: 100%;

		.rate {
			width: 100%;
			justify-content: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				color: #ff7e20;
				font-size: 30rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}
		}

		.question {
			box-shadow: 0px 2rpx 8rpx 0px rgba(81, 81, 81, 0.1);
			border-radius: 10rpx;
			padding: 0rpx 30rpx;
			display: flex;
			flex-direction: column;
			width: 540rpx;
			background: #FFFFFF;

			.question_tit {
				padding: 20rpx 0 26rpx 0;
				font-size: 24rpx;
				color: #999999;
				border-bottom: 1rpx solid #f4f5f9;
			}

			.evaluate_box {
				display: flex;
				flex-direction: column;

				&>view {
					text {
						font-size: 26rpx;
						color: #333;
						margin-left: 10rpx;
						margin-bottom: 10rpx;
					}

					display: flex;
					flex-direction: column;
					padding: 16rpx 0;
				}
			}

			.evaluate_btn {
				padding-bottom: 30rpx;
				padding-top: 20rpx;

				button {
					width: 230rpx;
					height: 56rpx;
					font-size: 28rpx;
					line-height: 56rpx;
				}
			}

			.question_box {
				display: flex;
				flex-wrap: wrap;

				view {
					box-sizing: border-box;
					color: #333;
					background-color: #F5F5F5;
					font-size: 24rpx;
					width: 230rpx;
					height: 56rpx;
					border-radius: 5rpx;
					// border: solid 1rpx #4371ff;
					border-radius: 10rpx;
					padding: 0 10rpx;
					margin-top: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					line-height: 56rpx;

					&:nth-child(2n) {
						margin-left: 20rpx;
					}
				}
			}

			.question_change {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 30rpx 0;

				image {
					height: 20rpx;
					width: 20rpx;
					margin-right: 10rpx;
				}

				text {
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
	}

	.cu-chat .cu-item>.cu-avatar {
		width: 80upx;
		height: 80upx;
	}

	.cu-chat .cu-item>.main {
		max-width: calc(100% - 160upx);
		margin: 0 40upx;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
	}

	.cu-chat .cu-item>image {
		height: 320upx;
	}

	.cu-chat .cu-item>.main .content {
		padding: 20upx;
		border-radius: 6upx;
		display: flex;
		max-width: 100%;
		align-items: center;
		font-size: 30upx;
		position: relative;
		line-height: 40upx;
		text-align: left;
		flex-wrap: wrap;

		text {
			word-break: break-all;
		}
	}

	.cu-chat .cu-item>.main .content:not([class*="bg-"]) {
		background-color: #ffffff;
		color: #333333;
	}

	.cu-chat .cu-item .date {
		position: absolute;
		font-size: 24upx;
		color: #8799a3;
		width: calc(100% - 320upx);
		bottom: 20upx;
		left: 160upx;
	}

	.cu-chat .cu-item .action {
		padding: 0 30upx;
		display: flex;
		align-items: center;
	}

	.cu-chat .cu-item>.main .content::after {
		content: "";
		top: 27upx;
		transform: rotate(45deg);
		position: absolute;
		z-index: 100;
		display: inline-block;
		overflow: hidden;
		width: 24upx;
		height: 24upx;
		left: -12upx;
		right: initial;
		background-color: inherit;
	}



	.cu-chat .cu-item.self>.main .content::after {
		left: auto;
		right: -12upx;
	}

	.cu-chat .cu-item>.main .content::before {
		content: "";
		top: 30upx;
		transform: rotate(45deg);
		position: absolute;
		z-index: -1;
		display: inline-block;
		overflow: hidden;
		width: 24upx;
		height: 24upx;
		left: -12upx;
		right: initial;
		background-color: inherit;
		filter: blur(5upx);
		opacity: 0.3;
	}

	.cu-chat .cu-item>.main .content:not([class*="bg-"])::before {
		background-color: #333333;
		opacity: 0.1;
	}

	.cu-chat .cu-item.self>.main .content::before {
		left: auto;
		right: -12upx;
	}

	.cu-chat .cu-item.self {
		justify-content: flex-end;
		text-align: right;
		flex: 1;
	}

	.cu-chat .cu-info {
		display: inline-block;
		margin: 20upx auto;
		font-size: 24upx;
		padding: 8upx 12upx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 6upx;
		color: #ffffff;
		max-width: 400upx;
		line-height: 1.4;
	}
</style>
